<template>
	<view class="">
		<picker-view ref="devPickerTime" :style="{'height':`${height}rpx`}" :value="indexValue" @change="bindChange"
			class="picker-view">
			<picker-view-column v-if="yearArray.length>0 && params.year">
				<view class="item" v-for="(item,index) in yearArray" :key="index">{{item}}年</view>
			</picker-view-column>
			<picker-view-column v-if="monthArray.length>0 && params.month">
				<view class="item" v-for="(item,index) in monthArray" :key="index">{{item}}月</view>
			</picker-view-column>
			<picker-view-column v-if="dayArray.length>0 && params.day">
				<view class="item" v-for="(item,index) in dayArray" :key="index">{{item}}日</view>
			</picker-view-column>
			<picker-view-column v-if="hourArray.length>0 && params.hour">
				<view class="item" v-for="(item,index) in hourArray" :key="index">{{item}}时</view>
			</picker-view-column>
			<picker-view-column v-if="minuteArray.length>0 && params.minute">
				<view class="item" v-for="(item,index) in minuteArray" :key="index">{{item}}分</view>
			</picker-view-column>
			<picker-view-column v-if="secondArray.length>0 && params.second">
				<view class="item" v-for="(item,index) in secondArray" :key="index">{{item}}秒</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	import dayjs from '@/common/utils/day/day.js'
	export default {
		name: 'dev-picker-time',
		props: {
			//开始时间
			startTime: {
				type: String,
				default: '1900-01-01'
			},
			//结束时间
			endTime: {
				type: String,
				default: dayjs().format('YYYY-MM-DD HH:mm:ss')
			},
			//默认时间
			defaultTime: {
				type: String,
				default: dayjs().format('YYYY-MM-DD HH:mm:ss')
			},
			//时间格式
			format: {
				type: String,
				default: 'YYYY-MM-DD'
			},
			//是否为24小时制
			twentyFourHour: {
				type: Boolean,
				default: true //默认为24小时制度
			},
			//格式
			params: {
				type: Object,
				default: () => ({
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				})
			},
			//样式
			indicatorStyle: {
				type: Object,
				default: () => ({})
			},
			//高度
			height: {
				type: [String, Number],
				default: 100
			},
			value: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				// indicatorStyle: `height: 50px;`,

				//拆分初始化时间
				splitDefaultTime: {
					year: '', //年
					month: '', //月
					day: '', //日
					hour: '', // 时
					minute: '', //分
					second: '', //秒
				},

				//拆分开始时间
				splitStartTime: {
					year: '', //开始年
					month: '', //开始月
					day: '', //开始日
					hour: '', //开始 时
					minute: '', //开始分
					second: '', //开始秒
				},
				//拆分结束时间
				splitEndTime: {
					year: '', //年
					month: '', //月
					day: '', //日
					hour: '', //时
					minute: '', //分
					second: '', //秒
				},

				yearArray: [], //年数据组
				monthArray: [], //月数据组
				dayArray: [], //日数据组
				hourArray: [], //时数据组
				minuteArray: [], //分数据组
				secondArray: [], //秒数据组


				startTimeList: [], //开始时间数组
				endTimeList: [], //结束时间数组
				defaultTimeList: [], //默认时间数组

				indexValue: [0,0,0,0,0,0], //当前回显值 下标
				

				chooseTime: {
					timesValue: '',
					year: '', //年
					month: '', //月
					day: '', //日
					hour: '', // 时
					minute: '', //分
					second: '', //秒
				}, //当前所选择时间

				justOneYear: false, //开始 年份 和结束年份在同一年
				sameMonth: false, //开始年月 和结束年月 相同
				sameDay: false, //开始年月日
				sameHour: false, //开始年月日时 和 结束年月日时 相同
				sameMinute: false, //开始年月日时分 和 结束年月日时分 相同
				sameSecond: false, //开始年月日时分秒 和 结束年月日时分秒 相同

				changeTimes: {
					year: false, //年
					month: false, //月
					day: false, //日
					hour: false, // 时
					minute: false, //分
					second: false, //秒
				}

			}
		},

		created() {
			this.resolutionTime(); //解析时间
		},
		watch: {
			startTime(newValue, oldValue) {
				this.resolutionTime(); //解析时间
			},
			endTime(newValue, oldValue) {
				this.resolutionTime(); //解析时间
			},
			defaultTime(newValue, oldValue) {
				this.resolutionTime(); //解析时间
			},
			format(newValue, oldValue) {
				this.resolutionTime(); //解析时间
			},
		},
		methods: {
			//解析时间 绘制数组
			resolutionTime() {
				if (!this.startTime) return
				if (this.twentyFourHour) {
					this.startTimeList = dayjs(this.startTime).format('YYYY,M,D,H,m,s').split(',');
					this.endTimeList = dayjs(this.endTime).format('YYYY,M,D,H,m,s').split(',');
					this.defaultTimeList = dayjs(this.defaultTime).format('YYYY,M,D,H,m,s').split(',');
					if (this.defaultTime) {
						this.$emit('input', dayjs(this.defaultTime).format(this.format))
					} else {
						this.$emit('input', dayjs(this.endTime).format(this.format))
					}
					this.justOneYear = false; //开始 年份 和结束年份在同一年
					this.sameMonth = false; //开始年月 和结束年月 相同
					this.sameDay = false; //开始年月日
					this.sameHour = false; //开始年月日时 和 结束年月日时 相同
					this.sameMinute = false; //开始年月日时分 和 结束年月日时分 相同
					this.sameSecond = false; //开始年月日时分秒 和 结束年月日时分秒 相同
					this.chooseTime.year = this.splitDefaultTime[0];
					this.chooseTime.month = this.splitDefaultTime[1];
					this.chooseTime.day = this.splitDefaultTime[2];
					this.chooseTime.hour = this.splitDefaultTime[3];
					this.chooseTime.minute = this.splitDefaultTime[4];
					this.chooseTime.second = this.splitDefaultTime[5];
					this.yearArray = this.monthArray = this.dayArray = this.hourArray = this.minuteArray = this
						.secondArray = [] //年数据组
					this.indexValue = [0, 0, 0, 0, 0, 0];

					console.log(this.startTimeList, 'this.startTimeList')
					console.log(this.endTimeList, 'this.endTimeList')
					console.log(this.defaultTimeList, 'this.defaultTimeList')
					console.log('重新计算了吗')
				} else {
					this.startTimeList = dayjs(this.startTime).format('YYYY,M,D,h,m,s').split(',');
					this.endTimeList = dayjs(this.endTime).format('YYYY,M,D,h,m,s').split(',');
					this.defaultTimeList = dayjs(this.defaultTime).format('YYYY,M,D,h,m,s').split(',');
				}
				//年
				if (this.params.year) {
					this.yearArray = [];
					this.splitStartTime.year = this.startTimeList[0] * 1;
					this.splitEndTime.year = this.endTimeList[0] * 1;
					this.splitDefaultTime.year = this.defaultTimeList[0] * 1;

					for (let i = this.splitStartTime.year; i <= this.splitEndTime.year; i++) {
						this.yearArray.push(i)
					}
					let index = this.yearArray.indexOf(this.splitDefaultTime.year);
					if (index !== -1) {
						this.indexValue[0] = index;
					} else {
						this.indexValue[0] = 0;
					}
				}
				//月
				if (this.params.month) {
					this.splitStartTime.month = this.startTimeList[1] * 1;
					this.splitEndTime.month = this.endTimeList[1] * 1;
					this.splitDefaultTime.month = this.defaultTimeList[1] * 1;
					//计算月数组
					this.modifyTimeArray({
						judgeKey: 'justOneYear',
						format: 'YYYY',
						valueIndex: 1,
						time: this.defaultTime,
						data: this.splitDefaultTime,
						typeKey: 'month',
						min: 1,
						max: 12,
						arrayKey: 'monthArray'
					}, true)
				}
				//日
				if (this.params.day) {
					this.splitStartTime.day = this.startTimeList[2] * 1;
					this.splitEndTime.day = this.endTimeList[2] * 1;
					this.splitDefaultTime.day = this.defaultTimeList[2] * 1;
					//计算日数组
					this.modifyTimeArray({
						judgeKey: 'sameMonth',
						format: 'YYYY-M',
						valueIndex: 2,
						time: this.defaultTime,
						data: this.splitDefaultTime,
						typeKey: 'day',
						min: 1,
						max: dayjs(this.defaultTime).daysInMonth(),
						arrayKey: 'dayArray'
					}, true)
				}
				//时
				if (this.params.hour) {
					this.splitStartTime.hour = this.startTimeList[3] * 1;
					this.splitEndTime.hour = this.endTimeList[3] * 1;
					this.splitDefaultTime.hour = this.defaultTimeList[3] * 1;

					this.modifyTimeArray({
						judgeKey: 'sameDay',
						format: 'YYYY-M-D',
						valueIndex: 3,
						time: this.defaultTime,
						data: this.splitDefaultTime,
						typeKey: 'hour',
						min: 0,
						max: 23,
						arrayKey: 'hourArray'
					}, true)
				}
				//分
				if (this.params.year) {
					this.splitStartTime.minute = this.startTimeList[4] * 1;
					this.splitEndTime.minute = this.endTimeList[4] * 1;
					this.splitDefaultTime.minute = this.defaultTimeList[4] * 1;

					this.modifyTimeArray({
						judgeKey: 'sameHour',
						format: 'YYYY-M-D-H',
						valueIndex: 4,
						time: this.defaultTime,
						data: this.splitDefaultTime,
						typeKey: 'minute',
						min: 0,
						max: 59,
						arrayKey: 'minuteArray'
					}, true)
				}
				//秒
				if (this.params.second) {
					this.splitStartTime.second = this.startTimeList[5] * 1;
					this.splitEndTime.second = this.endTimeList[5] * 1;
					this.splitDefaultTime.second = this.defaultTimeList[5] * 1;

					this.modifyTimeArray({
						judgeKey: 'sameMinute',
						format: 'YYYY-M-D-H-m',
						valueIndex: 5,
						time: this.defaultTime,
						data: this.splitDefaultTime,
						typeKey: 'second',
						min: 0,
						max: 59,
						arrayKey: 'secondArray'
					}, true)
				}
			},

			bindChange(e) {
				// return
				// if(this.indexValue === e.detail.value)return
				let timeIndex = e.detail.value;
				this.indexValue = timeIndex;
				//判断年月日是否发生改变
				if (this.chooseTime.year !== this.yearArray[timeIndex[0]]) this.changeTimes.year = true;
				if (this.chooseTime.month !== this.monthArray[timeIndex[1]]) this.changeTimes.month = true;
				if (this.chooseTime.day !== this.dayArray[timeIndex[2]]) this.changeTimes.day = true;
				if (this.chooseTime.hour !== this.hourArray[timeIndex[3]]) this.changeTimes.hour = true;
				if (this.chooseTime.minute !== this.minuteArray[timeIndex[4]]) this.changeTimes.minute = true;
				if (this.chooseTime.second !== this.secondArray[timeIndex[5]]) this.changeTimes.second = true;
				//赋值数据
				this.chooseTime.year = this.yearArray[timeIndex[0]] //年
				this.chooseTime.month = this.monthArray[timeIndex[1]] //月
				this.chooseTime.day = this.dayArray[timeIndex[2]] //日
				this.chooseTime.hour = this.hourArray[timeIndex[3]] //时
				this.chooseTime.minute = this.minuteArray[timeIndex[4]] //分
				this.chooseTime.second = this.secondArray[timeIndex[5]] //秒

				if (this.params.year) {
					this.chooseTime.timesValue = `${this.chooseTime.year}`;
				}
				if (this.params.month) {
					this.chooseTime.timesValue = `${this.chooseTime.year}-${this.chooseTime.month}`;
				}
				if (this.params.day) {
					this.chooseTime.timesValue = `${this.chooseTime.year}-${this.chooseTime.month}-${this.chooseTime.day}`;
				}
				if (this.params.hour) {
					this.chooseTime.timesValue =
						`${this.chooseTime.year}-${this.chooseTime.month}-${this.chooseTime.day} ${this.chooseTime.hour}`;
				}
				if (this.params.minute) {
					this.chooseTime.timesValue =
						`${this.chooseTime.year}-${this.chooseTime.month}-${this.chooseTime.day} ${this.chooseTime.hour}:${this.chooseTime.minute}`;
				}
				if (this.params.second) {
					this.chooseTime.timesValue =
						`${this.chooseTime.year}-${this.chooseTime.month}-${this.chooseTime.day} ${this.chooseTime.hour}:${this.chooseTime.minute}:${this.chooseTime.second}`;
				}
				let inputTime = dayjs(this.chooseTime.timesValue).format(this.format);
				// if( this.value !== inputTime){
				// 	console.log(this.value,'valueTime')
				// 	console.log(inputTime, '当前选中的事件')
				this.$emit('input', inputTime);
				// }
				this.recalculateArray(); //重新计算数组
			},
			//重新计算数组
			recalculateArray() {
				//年份变动需重新计算所有值
				//月
				if (this.params.month && this.changeTimes.year) {
					this.changeTimes.year = false;
					//重新计算月份
					this.modifyTimeArray({
						judgeKey: 'justOneYear',
						format: 'YYYY',
						valueIndex: 1,
						time: this.chooseTime.timesValue,
						data: this.chooseTime,
						typeKey: 'month',
						min: 1,
						max: 12,
						arrayKey: 'monthArray'
					})
					//重新计算天
					if (this.params.day && this.chooseTime.month) {
						this.modifyTimeArray({
							judgeKey: 'sameMonth',
							format: 'YYYY-M',
							valueIndex: 2,
							time: this.chooseTime.timesValue,
							data: this.chooseTime,
							typeKey: 'day',
							min: 1,
							max: dayjs(`${this.chooseTime.year}-${this.chooseTime.month}`).daysInMonth(),
							arrayKey: 'dayArray'
						})
					}

					//重新计算小时
					if (this.params.hour) {
						this.modifyTimeArray({
							judgeKey: 'sameDay',
							format: 'YYYY-M-D',
							valueIndex: 3,
							time: this.chooseTime.timesValue,
							data: this.chooseTime,
							typeKey: 'hour',
							min: 0,
							max: 23,
							arrayKey: 'hourArray'
						})
					}



					//重新计算分
					if (this.params.minute) {
						this.modifyTimeArray({
							judgeKey: 'sameHour',
							format: 'YYYY-M-D-H',
							valueIndex: 4,
							time: this.chooseTime.timesValue,
							data: this.chooseTime,
							typeKey: 'minute',
							min: 0,
							max: 59,
							arrayKey: 'minuteArray'
						})
					}


					//重新计算秒
					if (this.params.second) {
						this.modifyTimeArray({
							judgeKey: 'sameMinute',
							format: 'YYYY-M-D-H-m',
							valueIndex: 5,
							time: this.chooseTime.timesValue,
							data: this.chooseTime,
							typeKey: 'second',
							min: 0,
							max: 59,
							arrayKey: 'secondArray'
						})
					}

				}
				// 日
				if (this.params.day && this.changeTimes.month) {
					this.changeTimes.month = false;
					this.modifyTimeArray({
						judgeKey: 'sameMonth',
						format: 'YYYY-M',
						valueIndex: 2,
						time: this.chooseTime.timesValue,
						data: this.chooseTime,
						typeKey: 'day',
						min: 1,
						max: dayjs(this.chooseTime.timesValue).daysInMonth(),
						arrayKey: 'dayArray'
					})

					//重新计算小时
					if (this.params.hour) {
						this.modifyTimeArray({
							judgeKey: 'sameDay',
							format: 'YYYY-M-D',
							valueIndex: 3,
							time: this.chooseTime.timesValue,
							data: this.chooseTime,
							typeKey: 'hour',
							min: 0,
							max: 23,
							arrayKey: 'hourArray'
						})
					}

					//重新计算分
					if (this.params.minute) {
						this.modifyTimeArray({
							judgeKey: 'sameHour',
							format: 'YYYY-M-D-H',
							valueIndex: 4,
							time: this.chooseTime.timesValue,
							data: this.chooseTime,
							typeKey: 'minute',
							min: 0,
							max: 59,
							arrayKey: 'minuteArray'
						})
					}

					//重新计算秒
					if (this.params.second) {
						this.modifyTimeArray({
							judgeKey: 'sameMinute',
							format: 'YYYY-M-D-H-m',
							valueIndex: 5,
							time: this.chooseTime.timesValue,
							data: this.chooseTime,
							typeKey: 'second',
							min: 0,
							max: 59,
							arrayKey: 'secondArray'
						})
					}

				}

				//时
				if (this.params.hour && this.changeTimes.day) {
					this.changeTimes.day = false;
					this.modifyTimeArray({
						judgeKey: 'sameDay',
						format: 'YYYY-M-D',
						valueIndex: 3,
						time: this.chooseTime.timesValue,
						data: this.chooseTime,
						typeKey: 'hour',
						min: 0,
						max: 23,
						arrayKey: 'hourArray'
					})

					//重新计算分
					if (this.params.minute) {
						this.modifyTimeArray({
							judgeKey: 'sameHour',
							format: 'YYYY-M-D-H',
							valueIndex: 4,
							time: this.chooseTime.timesValue,
							data: this.chooseTime,
							typeKey: 'minute',
							min: 0,
							max: 59,
							arrayKey: 'minuteArray'
						})
					}

					//重新计算秒
					if (this.params.second) {
						this.modifyTimeArray({
							judgeKey: 'sameMinute',
							format: 'YYYY-M-D-H-m',
							valueIndex: 5,
							time: this.chooseTime.timesValue,
							data: this.chooseTime,
							typeKey: 'second',
							min: 0,
							max: 59,
							arrayKey: 'secondArray'
						})
					}

				}

				// 分
				if (this.params.minute && this.changeTimes.hour) {
					this.changeTimes.hour = false;
					this.modifyTimeArray({
						judgeKey: 'sameHour',
						format: 'YYYY-M-D-H',
						valueIndex: 4,
						time: this.chooseTime.timesValue,
						data: this.chooseTime,
						typeKey: 'minute',
						min: 0,
						max: 59,
						arrayKey: 'minuteArray'
					})

					//重新计算秒
					if (this.params.second) {
						this.modifyTimeArray({
							judgeKey: 'sameMinute',
							format: 'YYYY-M-D-H-m',
							valueIndex: 5,
							time: this.chooseTime.timesValue,
							data: this.chooseTime,
							typeKey: 'second',
							min: 0,
							max: 59,
							arrayKey: 'secondArray'
						})
					}

				}
				//秒
				if (this.params.second && this.changeTimes.minute) {
					this.changeTimes.minute = false;
					this.modifyTimeArray({
						judgeKey: 'sameMinute',
						format: 'YYYY-M-D-H-m',
						valueIndex: 5,
						time: this.chooseTime.timesValue,
						data: this.chooseTime,
						typeKey: 'second',
						min: 0,
						max: 59,
						arrayKey: 'secondArray'
					})
				}

			},
			//修改时间数组内容
			modifyTimeArray(val, fist) {
				//开始年月等于结束年月 没有必要再进行计算天数
				// if (this[val.judgeKey]) return
				this[val.arrayKey] = [];
				// 如果开始年月 等于 结束年月
				if (val.typeKey === 'hour') {
					console.log(val, '数据')
					console.log(dayjs(this.startTime).format(val.format), dayjs(this.endTime).format(val.format), dayjs(val
						.time).format(val.format), '时间')
				}

				if (dayjs(this.startTime).format(val.format) === dayjs(this.endTime).format(val.format)) {
					this[val.judgeKey] = true;
					for (let i = this.splitStartTime[val.typeKey]; i <= this.splitEndTime[val.typeKey]; i++) {
						this[val.arrayKey].push(i)
					}
					let index = -1;
					this[val.arrayKey].map((item, indexs) => {
						if (item === val.data[val.typeKey]) {
							index = indexs;
						}
					})
					if (index !== -1) {
						this.indexValue[val.valueIndex] = index;
					} else {
						this.indexValue[val.valueIndex] = 0;
					}
				} else if (dayjs(this.startTime).format(val.format) === dayjs(val.time).format(val.format)) {
					this[val.judgeKey] = false;
					for (let i = this.splitStartTime[val.typeKey]; i <= val.max; i++) {
						this[val.arrayKey].push(i)
					}
					let index = -1;
					this[val.arrayKey].map((item, indexs) => {
						if (item === val.data[val.typeKey]) {
							index = indexs;
						}
					})
					if (index !== -1) {
						this.indexValue[val.valueIndex] = index;
					} else {
						this.indexValue[val.valueIndex] = 0;
					}
				} else if (dayjs(this.endTime).format(val.format) === dayjs(val.time).format(val.format)) {
					this[val.judgeKey] = false;
					for (let i = val.min; i <= this.splitEndTime[val.typeKey]; i++) {
						this[val.arrayKey].push(i)
					}
					let index = -1;
					this[val.arrayKey].map((item, indexs) => {
						if (item === val.data[val.typeKey]) {
							index = indexs;
						}
					})
					if (index !== -1) {
						this.indexValue[val.valueIndex] = index;
					} else {
						this.indexValue[val.valueIndex] = 0;
					}

				} else {
					this[val.judgeKey] = false;
					for (let i = val.min; i <= val.max; i++) {
						this[val.arrayKey].push(i)
					}
					let index = -1;
					this[val.arrayKey].map((item, indexs) => {
						if (item === val.data[val.typeKey]) {
							index = indexs;
						}
					})
					if (index !== -1) {
						this.indexValue[val.valueIndex] = index;
					} else {
						this.indexValue[val.valueIndex] = 0;
					}
				}
				if (!fist) {
					this.bindChange({
						detail: {
							value: this.indexValue
						}
					})
				}

			}



		}
	}
</script>

<style style="scss" scoped>
	.picker-view {
		width: 100%;
		height: 400rpx;
		margin-top: 20rpx;
	}

	.item {
		display: flex;
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>
